import React,{Component} from 'react';
import Ordercard from './ordercard.jsx';
import './order.scss';
import LazyLoad from 'react-lazyload';
import { getOrderList, confirmReceiptGoods, cancelOrder, delOrder } from 'api/order.js';
import {
  Link
} from 'react-router-dom';
export default class Order extends Component{
	constructor (props) {
		super(props)
		this.state={
			pay_status: props.location.state ? props.location.state.pay_status : 0,
			orderList: [],
			color: 'active',
      currentStatus: 0,
      status: [
        {name: '全部', status: 0},
        {name: '待付款', status: 1},
        {name: '待发货', status: 2},
        {name: '待收货', status: 4}
      ],
      num: 'card_hide',
      num_can: 'card_hide',
      num_quer: 'card_hide',
      order_id: '',
      currentPage: 0,
      lastPage: 0
		}
	}
	_confirmReceiptGoods (num) { //确认收货接口
		confirmReceiptGoods({
			order_id: num
		}).then(res => {
			if (res.code === 1){
				this.setState({
					num_quer: 'card_hide',
					orderList: []
				}, () => {
					this._getOrderList(this.state.pay_status,1)
				})
			}
			
		})
	}
	_cancelOrder (num) { //取消订单
		cancelOrder({
			order_id: num
		}).then(res => {
			if (res.code === 1){
				this.setState({
					num_can: 'card_hide',
					orderList: []
				},() => {
					this._getOrderList(this.state.pay_status,1)
				})
			}
			
		})
	}
	_delOrder (num) { //删除订单
		delOrder({
			order_id: num
		}).then(res => {
			if (res.code === 1){
				this.setState({
					num: 'card_hide',
					orderList: []
				}, () => {
					this._getOrderList(this.state.pay_status,1)
				})
			}
			
		})
	}
	show (num,sum1) {
		this.setState({
			orderList: []
		},() => {
			this._getOrderList(num,sum1);
		})
	}
	_getOrderList (num,sum1) { //获取订单列表
		getOrderList({
			pay_status: num,
			page:sum1
		}).then(res => {
			if (res.message === '数据为空') {
        this.setState({
          orderList: [],
          currentStatus: num
        })
      } else if (res.code === 1) {
        this.setState({
          orderList: this.state.orderList.concat(res.data.data),
          currentStatus: num,
          currentPage: sum1,
          lastPage: res.data.last_page
        })
      }
		})
	}
	close (id) { //弹出删除订单
		this.setState({
			num: '',
			order_id: id
		})
	}
	close_can (id) { //弹出取消订单
		this.setState({
			num_can: '',
			order_id: id
		})
	}
	close_quer (id) { //弹出确认收货
		this.setState({
			num_quer: '',
			order_id: id
		})
	}
	click1 = () => { //弹窗关闭
		this.setState({
			num: 'card_hide',
			num_quer: 'card_hide',
			num_can: 'card_hide'
		})
	}
	componentDidMount () {
		this._getOrderList(this.state.pay_status,1);
		let that=this;
    let i=1;
    window.onscroll= function(){
      var t = document.documentElement.scrollTop||document.body.scrollTop;
      var b = document.documentElement.scrollHeight||document.body.scrollHeight;
      var h = document.documentElement.clientHeight||document.body.clientHeight;
      if((+t+h) == b && i <= that.state.lastPage && t!==0){
        that._getOrderList(that.state.pay_status,i++);
      }
    }
	}
	render(){
		return(
			<div className="order_O">
				<div className="big_title order1">
					<Link to='/user'><div className="glyphicon glyphicon-back"></div></Link>
					<span>订单管理</span>
				</div>
				<div className="big_nav order2">
          {
            this.state.status.map((item, index) => {
              return (
                <div onClick={this.show.bind(this, item.status,1)} className={this.state.currentStatus === item.status && 'active'} key={index}>{item.name}</div>
              )
            })
          }
				</div>
				<div className="order">
					{this.state.orderList.map((item, index) => {
            return (
              <LazyLoad offsetTop={200} key={index} height={0}>
                <Ordercard orderDetail={{...item}} _getOrderList={(value,num1) => this._getOrderList(value,num1)}  close={ id => this.close(id)} close_can={ id => this.close_can(id)} close_quer={ id => this.close_quer(id)}/>
              </LazyLoad>
            )
          })}
				</div>
				<div className="order_b"></div>
				<div className={`tanchu1 ${this.state.num}`}>
					<div>
						<p>确定要删除订单吗？</p>
						<p className="order_title">删除后订单将不再显示</p>
						<span onClick={this.click1}>取消</span><span onClick={this._delOrder.bind(this,this.state.order_id)}>确定</span>
					</div>
				</div>
				<div className={`tanchu ${this.state.num_can}`}>
					<div>
						<p>确定要取消订单吗？</p>
						<span onClick={this.click1}>取消</span><span onClick={this._cancelOrder.bind(this,this.state.order_id)}>确定</span>
					</div>
				</div>
				<div className={`tanchu1 ${this.state.num_quer}`}>
					<div>
						<p>要确认收货吗？</p>
						<p className="order_title">确认收货，货款将直接转入卖家账户</p>
						<span onClick={this.click1}>取消</span><span onClick={this._confirmReceiptGoods.bind(this,this.state.order_id)}>确定</span>
					</div>
				</div>
				<div className={this.state.currentPage >= this.state.lastPage ? 'noMore' : 'card_hide'} style={{textAlign: 'center'}}>————  老板，没有更多了！ ————</div>
			</div>
		)
	}
}
